<template>
  <div class="login-box">
    <div class="login-logo">
      <img src="~@/assets/logo.svg" alt="" />
      <h1>主机加固系统</h1>
    </div>
    <a-form layout="horizontal" :model="formInline" @submit="handleSubmit" @submit.prevent>
      <a-form-item>
        <a-input v-model:value="formInline.account" size="large" placeholder="请输入用户名">
          <template v-slot:prefix><user-outlined type="user"/></template>
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-input v-model:value="formInline.password" size="large" type="password" placeholder="请输入密码" autocomplete="new-password">
          <template v-slot:prefix><lock-outlined type="user"/></template>
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" html-type="submit" size="large" :loading="loading" block>
          登录
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
// ~@/assets/logo.png
import { useRoute, useRouter } from 'vue-router'

import { login } from '@/api/sys/user'
import store from '@/store'
import { isDev } from '@/utils/common'

export default defineComponent({
  name: 'login',
  components: { UserOutlined, LockOutlined },
  setup() {
    const state = reactive({
      loading: false,
      formInline: {
        account: isDev ? 'admin' : '',
        password: isDev ? '123456' : ''
      }
    })

    const router = useRouter()
    const route = useRoute()

    const handleSubmit = async () => {
      const { account, password } = state.formInline
      if (account.trim() == '' || password.trim() == '') return message.warning('用户名或密码不能为空！')
      const hide = message.loading('登录中...', 0)
      state.loading = true
      console.log(state.formInline)
      const params = {
        account,
        password
      }
      const result = await login(params)
        .catch(err => console.log(err))
        .finally(() => {
          state.loading = false
          message.destroy()
        })
      result ?? message.error('登录失败')
      if (result.code == 0) {
        localStorage.setItem('isLogin', 'true')

        store.dispatch('GenerateRoutes').then(() => {
          const children = store.getters.addRouters.find(item => item.name == 'index')?.children
          if (children === undefined) return message.error('抱歉，您没有访问主界面的权限！')
          const defaultPath = children[0]?.path
          const redirect = (route.query?.redirect as any)?.length > 4 ? route.query.redirect : false
          console.log(defaultPath, '默认跳转第一个子路由')
          const toPath = decodeURIComponent((redirect || defaultPath || '/') as string)
          console.log(toPath, 'toPath')
          console.log(redirect, 'redirect')
          message.success('登录成功！')
          console.log(router.getRoutes(), 'getRoutes')
          router.replace(toPath).then(_ => {
            if (route.name == 'login') {
              router.replace(toPath)
            }
          })
        })
        localStorage.setItem('username', params.account)
      } else {
        message.error(result.message || '登录失败')
      }
    }
    return {
      ...toRefs(state),
      handleSubmit
    }
  }
})
</script>

<style lang="scss" scoped>
.login-box {
  width: 100vw;
  height: 100vh;
  display: flex;
  padding-top: 240px;
  flex-direction: column;
  align-items: center;
  background: url('~@/assets/login.svg');
  background-size: 100%;

  .login-logo {
    display: flex;
    align-items: center;
    margin-bottom: 30px;

    .svg-icon {
      font-size: 48px;
    }

    img {
      height: 48px;
    }
    h1 {
      margin-left: 10px;
      margin-bottom: 0;
    }
  }

  ::v-deep(.ant-form) {
    width: 400px;

    .ant-col {
      width: 100%;
    }
    .ant-form-item-label {
      padding-right: 6px;
    }
  }
}
</style>
